<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>文章</title>
        <script src="js/jquery.min.js"></script>
        <script src="js/vue.js"></script>
        <script src="js/axios.min.js"></script>
        <script src="js/elementui.js"></script>
        <script src="js/request.js"></script>
        <link rel="stylesheet" href="css/elementui.css">
    </head>
    <body>
        <div id="app">
            <el-container>
                <el-header>
                    <div style="padding-top: 10px;">
                        <el-row :gutter="10">
                            <el-col :span="8" :offset="7">
                                <el-input v-model="input" placeholder="请输入内容" ></el-input>
                            </el-col>
                            <el-col :span="8">
                                <el-button type="primary" icon="el-icon-search">搜索</el-button>
                            </el-col>
                        </el-row>
                    </div>
                </el-header>
                <el-main>
                    <div style="width: 100%;height: 100%;min-height: 100vh;">
                        <el-row>
                            <el-col :span="20" :offset="2">
                                <el-card class="box-card" style="min-height: 100vh;">
                                    <div>
                                        <el-row>
                                            <el-col :span="20">{{article.id}}、{{article.title}}</el-col>
                                            <el-col :span="15" :offset="22">{{article.createtime?.substring(0,10)}}</el-col>
                                            <div class="text" style="margin-top: 50px;white-space: pre-line;line-height: 25px;">
                                                {{article.articleContent?.content}}
                                            </div>
                                            
                                        </el-row>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                </el-main>
            </el-container>
        </div>
    </body>
        <script>
            const app = new Vue({
                el:"#app",
                data:{
                    input:'',
                    article:''
                },
                created(){
                    this.getArticle();
                },
                methods:{
                    getArticle(){
                        let url = new URL(window.location.href);
                        let params = new URLSearchParams(url.search);
                        let id = params.get("id");
                        request.post("/get-article?id="+id).then(res=>{
                            if(res.code===200){
                                this.article = res.data
                                document.title=this.article.title
                                console.log(this.article)
                            }
                        })
                    },
                    openArticle(id){
                        window.location.href='http://127.0.0.1:5500/article.html?id='+id;
                    }
                    
                }
            })
        </script>
</html>